{% extends 'base.html' %}
{% load static %}
{% block content %}

<style>
    body {
        background: linear-gradient(to right, #f8f9fa, #e9ecef);
    }

    .card {
        border-radius: 10px;
        transition: transform 0.2s ease-in-out;
    }

    .card:hover {
        transform: translateY(-5px);
    }

    .card-header {
        border-bottom: none;
    }

    .dashboard-avatar {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border: 3px solid #4e73df;
    }

    .badge-pill {
        padding: 0.5em 0.8em;
        font-size: 0.85rem;
    }

    .table th,
    .table td {
        vertical-align: middle !important;
    }

    .btn-outline-primary {
        color: #4e73df;
        border-color: #4e73df;
    }

    .btn-outline-primary:hover {
        background-color: #4e73df;
        color: white;
    }




</style>

<div class="container py-4">
    <div class="row">
        <!-- 左侧用户信息 -->
        <div class="col-lg-3 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <img src="{% static '头像.png' %}" alt="管理员头像" class="rounded-circle mb-3" width="100">
                    <h5>{{ request.user.username }}</h5>
                    <p class="text-muted mb-1">{{ request.user.get_role_display }}</p>
                    <p class="text-muted mb-3">{{ request.user.email }}</p>
                    <hr class="my-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>账户状态</span>
                            <span class="badge bg-success rounded-pill">活跃</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>注册日期</span>
                            <span>{{ request.user.date_joined|date:"Y-m-d" }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 右侧功能区域 -->
        <div class="col-lg-9">

            <!-- 仅对生产商显示 -->
<!--            {% if request.user.is_producer %}-->
<!--            <div class="card mb-4 shadow-sm border-0">-->
<!--                <div class="card-header bg-primary text-white d-flex align-items-center justify-content-between">-->
<!--                    <h5 class="mb-0">📦 农产品管理</h5>-->
<!--                    <span class="badge bg-light text-primary">Producer Only</span>-->
<!--                </div>-->
<!--                <div class="card-body">-->
<!--                    <div class="row g-3">-->
<!--                        &lt;!&ndash; 信息上传 &ndash;&gt;-->
<!--                        <div class="col-md-12">-->
<!--                            <div class="card h-100 border-0 shadow-sm">-->
<!--                                <div class="card-body">-->
<!--                                    <h5 class="card-title">📤 农产品信息上传</h5>-->
<!--                                    <p class="card-text">上传农产品的原材料来源、生产过程等详细信息。</p>-->
<!--                                    <a href="{% url 'input_data' %}" class="btn btn-primary mt-2">开始上传</a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            {% endif %}-->

            <!-- 新增：录入农产品信息 -->
             {% if request.user.is_producer %}
            <div class="card mb-4 shadow-sm border-0">
                <div class="card-header bg-success text-white d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">🌾 录入农产品信息</h5>
                    <span class="badge bg-light text-success">生产商</span>
                </div>
                <div class="card-body">
                    <div class="row align-items-center g-3">
                        <div class="col-md-8">
                            <p class="card-text mb-0">填写农产品来源、生产过程、检验批次、物流流转等信息。</p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <a href="{% url 'input_data' %}" class="btn btn-success w-100 mb-2">开始录入</a>
                            <a href="{% url 'agricultural_product_list' %}" class="btn btn-outline-secondary w-100 mb-2">查看已录入信息</a>
                            <a href="{% url 'sold_orders_all' %}" class="btn btn-secondary w-100 mb-2">查看所有已售出订单</a>


                        </div>
                    </div>
                </div>
            </div>
             {% endif %}
                                    <!-- 新增：仅对顾客显示 -->
            {% if request.user.is_customer %}
            <div class="card mb-4 shadow-sm border-0">
                <div class="card-header bg-success text-white d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">🛒 顾客功能</h5>
                    <span class="badge bg-light text-success">Customer Only</span>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <!-- 购买农产品 -->
                        <div class="col-md-6">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title">🛍️ 农产品购买</h5>
                                    <p class="card-text">浏览可购买的农产品并下单。</p>
                                    <a href="{% url 'product_catalog' %}" class="btn btn-success mt-2">前往购买</a>
                                </div>
                            </div>
                        </div>

                        <!-- 查看订单 -->
                        <!-- 查看订单 -->
<div class="col-md-6">
    <div class="card h-100 border-0 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">📝 我的订单</h5>
            <p class="card-text">查看您已购买的农产品订单记录。</p>
            <a href="{% url 'order_history' %}" class="btn btn-success mt-2">查看订单</a>
        </div>
    </div>
</div>

                    </div>
                </div>
            </div>
            {% endif %}


            <!--            数据加密工具-->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">数据加密工具</h5>
                </div>
                <div class="card-body">

                    <div class="row g-4">
                        <!-- 文本加密卡片 -->
                        <div class="col-md-6">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title">🔐 文本加密</h5>
                                    <p class="card-text">使用高级加密算法保护您的敏感文本信息。</p>
                                    <a href="{% url 'text_encrypt' %}" class="btn btn-primary mt-2">开始加密</a>
                                </div>
                            </div>
                        </div>

                        <!-- 历史记录卡片 -->
                        <div class="col-md-6">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title">📜 历史上传记录</h5>
                                    <p class="card-text">查看您之前上传并加密过的文件记录。</p>
                                    <a href="{% url 'encryption_history' %}" class="btn btn-primary mt-2">查看记录</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 最近活动 -->
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">🕒 最近活动</h5>
                </div>
                <div class="card-body">
                    {% if recent_activities %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                            <tr>
                                <th scope="col">时间</th>
                                <th scope="col">操作</th>
                                <th scope="col">IP地址</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for activity in recent_activities %}
                            <tr>
                                <td>{{ activity.created_at|date:"Y-m-d H:i:s" }}</td>
                                <td>
                                    {% if activity.action == 'login' %}
                                    <span class="badge bg-success">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'logout' %}
                                    <span class="badge bg-primary">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'text_encrypt' %}
                                    <span class="badge bg-warning text-dark">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'view_history' %}
                                    <span class="badge bg-secondary">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'view_detail' %}
                                    <span class="badge bg-info text-dark">{{ activity.get_action_display }}</span>
                                    {% else %}
                                    <span class="badge bg-info text-white">{{ activity.get_action_display }}</span>
                                    {% endif %}
                                </td>
                                <td><code>{{ activity.ip_address }}</code></td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted text-center my-3">暂无活动记录。</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
